<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table :data="tableData" border style="width: 100%" :show-header="false">
      <el-table-column prop="a" width="180" align="center" class-name="color">
      </el-table-column>
      <el-table-column prop="b" align="center">
      </el-table-column>
      <el-table-column prop="c" width="180" align="center" class-name="color">
      </el-table-column>
      <el-table-column prop="d" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        a: '服务器操作系统:',
        b: 'Window 10',
        c: 'Web 服务器:',
        d: 'Tomcat/8.0.5',
      }, {
        a: 'PHP 版本:',
        b: '5.6.30',
        c: 'MySQL 版本:',
        d: '5.5.56',
      }, {
        a: '安全模式:',
        b: '否',
        c: '安全模式GID:',
        d: '否',
      }, {
        a: 'Socket 支持:',
        b: '是',
        c: '时区设置:',
        d: 'Asia/Shanghai',
      }, {
        a: 'GD 版本:',
        b: 'GD2 ( JPEG GIF PNG)',
        c: 'Zlib 支持:',
        d: '是',
      }, {
        a: 'IP 库版本:',
        b: '20171024',
        c: '文件上传的最大大小:',
        d: '40M',
      }, {
        a: '程序版本:',
        b: 'v2.2.2 RELEASE 20200324',
        c: '安装日期:',
        d: '2020-08-05',
      }, {
        a: '编码:',
        b: 'UTF-8',
        c: '',
        d: '',
      }]
    }
  },
  methods: {

  }
}
</script>

<style>
.color {
  background-color: gainsboro;
}
.el-table tr {
  pointer-events: none;
}
</style>